<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节祝福</title>
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <style>
      /* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: '楷体', cursive;
    background-color: #f00; /* 红色背景 */
    overflow: hidden;
}

/* 红包雨效果 */
.red-envelope-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.red-envelope {
    position: absolute;
    top: -100px; /* 初始位置在屏幕上方 */
    width: 50px; /* 红包大小 */
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* 祝福语 */
.greeting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffd700; /* 金色 */
    font-size: 2rem;
}

/* 灯笼 */
.lanterns {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.lantern {
    width: 100px;
    animation: swing 3s ease-in-out infinite;
}

@keyframes swing {
    0%, 100% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
}
    </style>
</head>

<body>
    <!-- 背景红包雨 -->
    <div class="red-envelope-rain"></div>

    <!-- 祝福语 -->
    <div class="greeting">
        <h1 id="greeting-text"></h1>
    </div>

    <!-- 灯笼 -->
    <div class="lanterns">
        <img src="../../assets/lantern.png" alt="灯笼" class="lantern">
    </div>

    <!-- 背景音乐 -->
    <audio autoplay loop>
        <source src="../../assets/lantern.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>

    <script>
       // 生成随机红包雨
function createRedEnvelope() {
    const redEnvelopeRain = document.querySelector('.red-envelope-rain');

    // 创建红包
    const redEnvelope = document.createElement('img');
    redEnvelope.src = '../../assets/redBag.png';
    redEnvelope.classList.add('red-envelope');

    // 随机水平位置
    const randomLeft = Math.random() * window.innerWidth;
    redEnvelope.style.left = `${randomLeft}px`;

    // 随机大小
    const randomSize = 40 + Math.random() * 40; // 大小在30px到60px之间
    redEnvelope.style.width = `${randomSize}px`;

    // 随机掉落速度
    const randomDuration = 3 + Math.random() * 5; // 速度在3s到8s之间
    redEnvelope.style.animationDuration = `${randomDuration}s`;

    // 随机延迟
    const randomDelay = Math.random() * 2; // 延迟在0s到5s之间
    redEnvelope.style.animationDelay = `${randomDelay}s`;

    // 添加到页面
    redEnvelopeRain.appendChild(redEnvelope);

    // 红包掉落后移除
    redEnvelope.addEventListener('animationend', () => {
        redEnvelope.remove();
    });
}

// 每隔一段时间生成一个红包
setInterval(createRedEnvelope, 500); // 每0.5秒生成一个红包

// 打字机效果
const greetingText = document.getElementById('greeting-text');
const text = '新年快乐，万事如意！';
let index = 0;

function typeWriter() {
    if (index < text.length) {
        greetingText.innerHTML += text.charAt(index);
        index++;
        setTimeout(typeWriter, 200); // 控制打字速度
    }
}

// 页面加载后开始打字机效果
window.onload = function () {
    typeWriter();
};
    </script>
</body>

</html>